<template>
	<view class="content">
		<swiper :indicator-dots="imgList.length > 1" duration="500">
			<swiper-item class="d-flex center align-center" v-for="(item,index) in imgList" :key="index">
				<view class="imgBOX">
					<img class="img" :src="item.src" alt="">
				</view>
			</swiper-item>
		</swiper>
		<view class="info">
			<view class="info-body">
				<view class="base-info">
					基本信息
				</view>
				<view class="card" style="border: 0;">
					<view class="left">品牌</view>
					<view class="right">法拉利</view>
				</view>
				<view class="card" v-for="(item,index) in infoList" :key='index'>
					<view class="left">{{item.left}}</view>
					<view :class="item.change?item.change:'right'">{{item.right}}</view>
				</view>
			</view>
		</view>
		<view class="schedule">
			<view class="car-schedule">
				车辆档期
			</view>
			<uni-calendar 
			date="2020-12-27"
			:selected="selected" 
			:showMonth="false" 
			:rang="true" 
			:insert="true" 
			:start-date="'2019-3-2'" 
			:end-date="'2019-5-20'"
			 @change="change">
			</uni-calendar>
		</view>
	</view>
</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue'
	import icons from '../../../../common/icons.js'
	export default {
		components: {
			uniCalendar
		},
		data() {
			return {
				imgList: [{
					src: icons.icons.picPorsche
				}],
				infoList: [{
						left: '型号',
						right: '488'
					},
					{
						left: '保险状态',
						right: '在保'
					},
					{
						left: '行驶证照片',
						right: '点击查看',
						change: 'clickChange'
					},
					{
						left: '车牌',
						right: '粤B 999888'
					},
					{
						left: '归属地',
						right: '广东省 深圳市'
					}
				],
				selected: [{
					date: '2020-12-26',
					info: '起租',
					data: {
						custom: '自定义信息',
						name: '自定义消息头',
					}},
					{
						date: '2020-12-27',
						info: '还车',
						data: {
							custom: '自定义信息',
							name: '自定义消息头',
						}},
				]
			}
		},
		methods: {
			change() {

			},
		}
	}
</script>

<style>
	page {
		background: #EDEDED;
	}
</style>

<style scoped>
	.car-schedule {
		width: 92vw;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.schedule {
		margin-top: 20rpx;
		padding-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100vw;
		background: #FFFFFF;
	}

	.clickChange {
		font-size: 28rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #B6914E;
	}

	.right {
		font-size: 28rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #333333;
	}

	.left {
		font-size: 28rpx;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #666666;
	}

	.card {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
		border-top: 1px solid #EBEBEB;
		width: 92vw;
	}

	.base-info {
		width: 92vw;
		display: flex;
		justify-content: flex-start;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.info-body {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 92vw;
	}

	.info {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100vw;
		margin-top: 20rpx;
		background: #FFFFFF;
		padding-top: 20rpx;
	}

	.imgBOX {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.img {
		width: 100vw;
		height: 420rpx;
	}

	swiper {
		width: 100vw;
		height: 420rpx;
		background-color: #FFFFFF;
	}

	.content {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		width: calc(100%);
		min-height: 100vh;

	}
</style>
